Skip to main content

Running a Flow for a Specific Connection (Contact)

In this section, we’ll focus on how to trigger and manage flows (activities) for a specific contact. The SDK allows users to run various credential exchange flows, and when a flow is initiated, specific activity callbacks are triggered based on the type of data being exchanged.

The activity callbacks are customizable, meaning that each developer can design their own flows and screens based on the activities provided by the SDK.

Objective​

We will cover how to:

  1. Set up activity callbacks for different types of flows.
  2. Configure the SDK to handle flows.
  3. Customize the user interface to manage different activities, such as entering single-line data, date and time, credit card information, or even capturing a photo.
  4. Run a flow and interact with the user through a modal that lists the available flows.

Understanding Activity Callbacks​

To accomplish your request, here's a structured outline of the "Activity Callbacks" documentation. This will help users easily understand each callback, its purpose, and example code. The clickable sections will allow users to navigate to the detailed explanations of each callback.

Understanding Activity Callbacks​

The SDK provides several activity callbacks that allow your app to interact with users for various tasks during a flow. Here’s a summary of some common activity callbacks:

  • Single Line Activity: Handles single-line text input (e.g., asking for a name).
  • Option Activity: Allows users to choose from multiple options.
  • Date Time Activity: Requests date and time input.
  • Credit Card Activity: Collects credit card details such as cardholder name, card number, expiry date, and CVV.
  • Address Activity: Requests address information.
  • Amount Activity: Handles numeric input (e.g., requesting an amount).
  • Multi-Line Activity: Handles multi-line text input (e.g., descriptions).
  • Camera Activity: Captures a photo or scans a QR code.
  • Operation Started/Completed: Used for flow operation progress indicators.

Jump to Detailed Descriptions of Each callback Activity:​

Running a Flow with a Modal​

When running a flow, you might want to present a modal that lists available flows for a specific contact. Below is an example of how to implement a modal that allows users to select and run flows for a contact.

import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  FlatList,
  Dimensions,
} from "react-native";
import Modal from "react-native-modal";
import { ContactFlow } from "@one37id/mobile-js-sdk";
import { initializeAgent } from "../../one37Agent";

const { height } = Dimensions.get("window"); // Get device height

type AddCredentialModalProps = {
  flows: ContactFlow[],
  modalVisible: boolean,
  setModalVisible: (visible: boolean) => void,
  contactName: string,
};

export const AddCredentialModal = ({
  modalVisible,
  setModalVisible,
  flows,
  contactName,
}: AddCredentialModalProps) => {
  // Function to run the selected flow
  const handleFlowRun = async (flow: ContactFlow) => {
    console.log("Running flow:", flow);
    const agent = await initializeAgent();
    try {
      setModalVisible(false); // Close the modal when flow starts
      const result = await agent?.contactManager.runFlow(
        flow.contactId,
        flow.namespace,
        flow.version
      );
      console.log("Flow result:", result);
    } catch (error) {
      console.error("Error running flow:", error);
    }
  };

  // Render each flow item in the modal
  const renderFlowItem = ({ item }: { item: ContactFlow }) => (
    <TouchableOpacity
      style={styles.flowItem}
      onPress={() => handleFlowRun(item)}
    >
      <Text style={styles.flowText}>{item.title}</Text>
    </TouchableOpacity>
  );

  return (
    <Modal
      isVisible={modalVisible}
      onBackdropPress={() => setModalVisible(false)}
      animationIn="slideInUp"
      animationOut="slideOutDown"
      backdropColor="rgba(0,0,0,0.5)"
      backdropOpacity={0.5}
      style={styles.modalContainer}
    >
      <View style={[styles.modalContent, { maxHeight: height * 0.5 }]}>
        <Text style={styles.headerText}>Start Flow with {contactName}</Text>
        <FlatList
          data={flows}
          keyExtractor={(item) => item.namespace}
          renderItem={renderFlowItem}
        />
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalContainer: {
    justifyContent: "flex-end",
    margin: 0,
  },
  modalContent: {
    backgroundColor: "#fff",
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 20,
  },
  headerText: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 15,
  },
  flowItem: {
    padding: 15,
    backgroundColor: "#f0f0f0",
    marginBottom: 10,
    borderRadius: 10,
  },
  flowText: {
    fontSize: 16,
    color: "#333",
  },
});

Adding Activity Callbacks to the Agent Configuration​

Once you’ve set up the activityCallbackHandlers object, you need to pass it into the agent configuration when initializing the SDK.

Example Agent Configuration:

const agentConfig: AgentConfig = {
  encryptionKey: DB_ENCRYPTION_KEY,
  home: agentInfo,
  webSocketSettings: {
    idleTimeoutSeconds: 180,
    scanIntervalSeconds: 5,
  },
  autoProcessIncomingMessages: false,
  userInfo: {
    name: firstName + " " + lastName,
  },
  callbackHandlers: callbackHandlers, // General callback handlers
  activityCallbackHandlers: activityCallbackHandlers, // Activity handlers
  eventHandlers: {},
};

Final Thoughts​

By following the steps outlined in this documentation:

  1. Set Up Activity Callbacks: Define and handle various activities (e.g., single-line input, address, etc.).
  2. Run Flows via the Modal: Display a modal that lists available flows for a specific contact and run the selected flow.
  3. Custom User Interfaces: Customize the UI to handle different types of user inputs required for each flow.

This setup will allow users to run flows efficiently within your app and handle various interactions through modals

or custom screens. You can further extend this with custom error handling, validation, and data persistence as needed.

To-Do: Create a UI to Collect Requested Info for Each Activity​

For each activity type (e.g., singleLineActivity, addressActivity, creditCardActivity, etc.), we need to build a user interface that dynamically collects the required information based on the specific object type. This will involve:

  • Understanding the Data Structure: Each activity provides a specific data structure (e.g., SingleLineActivityOptions, AddressActivityOptions), so the UI should adapt to display the appropriate input fields (text fields, dropdowns, date pickers, etc.).

  • Handling User Input: The UI should gather the user's input and return the correct data format to the callback handler when the activity is completed (e.g., pressing "OK" or "Submit").

  • Customizing the UI: Depending on the object type, we need to ensure the UI provides clear guidance for the user to input the required data (e.g., name, address, amount). Validation may also be required to ensure the data is correctly formatted.

By building a flexible and reusable UI component, we can ensure that the app efficiently handles all activities triggered by the SDK.

X

Graph View